<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小厨房</title>
  <!-- 链入css初始化 -->
  <link rel="stylesheet" href="../../css/base.css">
  <!-- 链入头部和底部通用样式 -->
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/main.css">
  <!-- 链入首页主体样式 -->
  <link rel="stylesheet" href="../../css/index.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="../../css/idangerous.swiper.css">
  <link rel="stylesheet" type="text/css" href="../../css/animate.css">
  <link rel="stylesheet" type="text/css" href="../../css/style.css">
  <!--<link rel="stylesheet" type="text/css" href="../../css/production/productionLDetail.css">-->
  <link rel="stylesheet" type="text/css" href="../../css/kitchenette.css">
  <!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>
<![endif]-->
</head>
<style>
 

  /* 焦点需要设置 */
  .pagination1 {
    position: absolute;
    z-index: 100;
    left: 50%;
    margin-left: -60px;
    bottom: 10px;
  }

  .swiper-pagination-switch {
    width: 28px;
    height: 2px;
    border-radius: 0;
    display: inline-block;
    margin: 7px 7px 13px;
    cursor: pointer;
    border: none;
    background: #fffafc;
  }

  .swiper-pagination-switch:hover,
  .swiper-active-switch {
    background: #068F1F;
  }
</style>

<body>
  <header></header>
  <div class="productList-container">
    <div class="kitchenette-container-img">
      <img class="banner pc" src="../../img/ssx.jpg" alt="" >
      <!--<img class="hide" src="../../img/mobile/banner2.jpg" alt="">-->
      <!--<img src="../../img/kitchen/banner.jpg" alt="" class="banner pc">-->
      <img src="../../img/mobile/bannner3.jpg" alt="" class="banner mobile">
    </div>

    <div class="productDetailWarp kitchenetteDetailWarp wow fadeInUpBig">
      <div class="productDetail  ">
        <div class="top clearfix show">
          <div class="pull-left">菜谱详情</div>
          <a href="list.html">
            <div class="pull-right"><img src="../../img/production/back.png" alt=""></div>
          </a>
        </div>
        <div class="bottom clearfix">
          <div class="pull-left lf">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img class="img-responsive" src="../../img/kitchen/img_06.jpg" alt="">
                </div>
                <div class="swiper-slide">
                  <img class="img-responsive" src="../../img/kitchen/img_06.jpg" alt="">
                </div>
                <div class="swiper-slide">
                  <img class="img-responsive" src="../../img/kitchen/img_06.jpg" alt="">
                </div>
              </div>
            </div>
            <div class="pagination1"></div>
          </div>
          <div class="pull-left rt">
            <div class="specification" style="font-weight: bold;">【十三香小厨房】鲜嫩喷香的葱爆羊肉,好吃的连葱都不剩</div>
            <div class="introduce">
              冬天，最适合吃的肉食就是羊肉了。按中医的说法，寒冬腊月人体的阳气被藏在体内，容易出现手足冰冷、气血循环不畅的情况。而羊肉味甘不腻，性温不燥，具有补肾壮阳、暖中祛寒、温补气血、开胃健脾的功效，所以冬天吃羊肉，既能抵御风寒，又可滋补身体，实是一举两得的美事。
            </div>
          </div>
        </div>
      </div>
    </div>
    <p class="contantBox wow fadeInUpBig">想要将羊肉做到鲜嫩不膻，还是大有讲究的，葱爆羊肉就是最经典的做法之一。滑嫩多汁、鲜香不膻的羊肉和清爽的葱白融合得恰到好处，令人回味无穷。
      今天十三香小厨房教大家用王守义十三香做这道葱爆羊肉。</p>
  </div>
  <!-- <div class="video" ></div> -->
  <!-- -->
 <div class="videoKitchen">
    <!-- <img src="../../img/play.png" class="play"> -->
    <video poster="../../img/banner1.jpg" class="video" preload="auto"  object-fit= 'fill' controls="controls">
        <source src="http://www.mobiexchanger.com/images/video/v3.mp4" type="video/mp4">            
        您的浏览器不支持 video 标签。
    </video>
 </div>
  <footer></footer>

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="../../public/idangerous.swiper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <script src="../../js/ckplayer.js"></script>
  <script src="../../js/common.js"></script>
  <script type="text/javascript">
    $(function () {
      $('header').load('../../template/header.html')
      $('footer').load('../../template/footer.html')
      var viewSwiper = new Swiper('.swiper-container', {
        autoplay: 1000,
        visibilityFullFit: true,
        speed: 1500,
        loop: true,
        grabCursor: true,
        pagination: '.pagination1',
        paginationClickable: true,
        calculateHeight : true, //自动适应图片的高度
        // onSlideChangeStart: function () {
        //   updateNavPosition()
        // }
      })

      if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
      };
      // PC点击播放视频
    // $('.page1 ').on('click','.play',function(){
    //     $('video')[0].play()
    // })
    // 点击关闭视频
    // $('.videoBox').on('click','.close',function(){
    //     $('video')[0].pause()
    // })
    })
  </script>
</body>

</html>